<template>
  <div>
    <div id="pic">
      <div id="login-btns">
        <div id="btns">
          <button class="btn1" @click="showPopup">本机号码一键登录</button>
          <br />
          <button @click="toLogin">手机号登录</button>
          <van-popup
            id="pop"
            closeable
            round
            position="bottom"
            :style="{ height: '40%' }"
            v-model="show"
          >
            <div id="pop-content">
              <img src="../img/login/logo.png" alt="" />
              <p id="phnum">177****7652</p>
              <span>中国电信提供认证服务</span>
              <button @click="toHome" class="btn1">本机号码一键登录</button>
              <span
                >我已阅读并同意《天翼账号认证服务条款
                》和《注册协议》以及《隐私政策》</span
              >
            </div>
          </van-popup>
        </div>

        <span>点击登录代表你已同意隐私政策</span>
        <div id="third-party">
          <a href=""><img src="../img/login/QQ.png" alt="" /></a>
          <a href=""><img src="../img/login/微信.png" alt="" /></a>
          <a href=""><img src="../img/login/苹果.png" alt="" /></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    toHome(){
      this.$router.push('/home')
    },
    toLogin(){
      this.$router.push('/login')
    }
  },
};
</script>

<style lang="scss" scoped>
#pic {
  width: 750px;
  height: 1624px;
  background-image: url("../img/login/start.jpg");
  background-size:100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 20px;
  padding-top: 1081px;
  box-sizing: border-box;
  #btns {
    font-size: 34px;
    color: #ffffff;
    #pop {
      color: black;
      padding-top: 70px;
      #pop-content {
        .btn1{
          margin-bottom: 0;
        }
        span {
          display: block;
          width: 516px;
          height: 43px;
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #999999;
          &:nth-of-type(1) {
            margin-top: 21px;
            margin-bottom: 60px;
          }
          &:nth-of-type(2){
            margin: 54px auto 0;
          }
        }
        p {
          margin: 0 auto;
          width: 265px;
          height: 36px;
          font-size: 48px;
          font-family: DIN;
          font-weight: 500;
          color: #000000;
        }
        img {
          display: block;
          margin: 0 auto;
        }
      }
    }
    .btn1 {
      color: #ffffff;
      width: 512px;
      height: 80px;
      font-size: 34px;
      background: #0ea918;
      border-radius: 40px;
      margin: 0 auto;
      margin-bottom: 38px;
      border: none;
    }
    button:nth-of-type(2) {
      width: 512px;
      height: 80px;
      background: rgba(255, 255, 255, 0.3);
      border: 1px solid #ffffff;
      border-radius: 40px;
    }
  }
  #login-btns {
    span {
      display: block;
      margin: 54px auto;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #9fa0a0;
    }
    #third-party {
      display: flex;
      justify-content: space-around;
      img{
        width: 78px;
      }
    }
  }
}
</style>
